<template>
  <view class="my-container">
    <!-- 用户信息卡片 -->
    <view class="user-card">
      <view class="user-info" @tap="navigateTo('/pages/my/profile')">
        <image :src="userInfo.avatar" mode="aspectFill" class="avatar" />
        <view class="info">
          <text class="name">{{ userInfo.name }}</text>
          <text class="id">就诊卡号：{{ userInfo.cardNo }}</text>
        </view>
      </view>
      <view class="vip-info" @tap="navigateTo('/pages/my/vip')">
        <text class="level">{{ userInfo.vipLevel }}</text>
        <text class="desc">查看会员权益 ></text>
      </view>
    </view>
    
    <!-- 快速入口 -->
    <view class="quick-access">
      <view 
        class="access-item"
        v-for="(item, index) in quickAccess"
        :key="index"
        @tap="navigateTo(item.path)"
      >
        <text class="count">{{ item.count }}</text>
        <text class="label">{{ item.label }}</text>
      </view>
    </view>
    
    <!-- 功能列表 -->
    <view class="function-list">
      <view class="section" v-for="(section, idx) in functionList" :key="idx">
        <text class="section-title" v-if="section.title">{{ section.title }}</text>
        <view class="menu-list">
          <view 
            class="menu-item"
            v-for="(item, index) in section.items"
            :key="index"
            @tap="navigateTo(item.path)"
          >
            <view class="left">
              <text class="iconfont" :class="item.icon"></text>
              <text class="label">{{ item.label }}</text>
            </view>
            <view class="right">
              <text class="value" v-if="item.value">{{ item.value }}</text>
              <text class="tag" v-if="item.tag">{{ item.tag }}</text>
              <text class="iconfont icon-arrow-right"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 退出登录 -->
    <view class="logout-btn" @tap="handleLogout">
      退出登录
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 用户信息
const userInfo = ref({
  name: '张三',
  avatar: '/static/avatar/default.jpg',
  cardNo: '1234567890',
  vipLevel: 'VIP 1'
})

// 快速入口
const quickAccess = ref([
  { label: '待就诊', count: 1, path: '/pages/appointment/record' },
  { label: '待付款', count: 2, path: '/pages/payment/record' },
  { label: '待评价', count: 3, path: '/pages/my/reviews' },
  { label: '优惠券', count: 5, path: '/pages/my/coupons' }
])

// 功能列表
const functionList = ref([
  {
    title: '就医服务',
    items: [
      { 
        label: '挂号记录', 
        icon: 'icon-record',
        path: '/pages/appointment/record'
      },
      { 
        label: '缴费记录', 
        icon: 'icon-payment',
        path: '/pages/payment/record'
      },
      { 
        label: '就医记录', 
        icon: 'icon-medical',
        path: '/pages/records/medical'
      },
      { 
        label: '就诊人管理', 
        icon: 'icon-contacts',
        path: '/pages/patient/list',
        value: '已添加3人'
      }
    ]
  },
  {
    title: '健康服务',
    items: [
      { 
        label: '健康档案', 
        icon: 'icon-health',
        path: '/pages/my/health-records'
      },
      { 
        label: '检查报告', 
        icon: 'icon-report',
        path: '/pages/records/reports',
        tag: '新'
      }
    ]
  },
  {
    title: '账户设置',
    items: [
      { 
        label: '实名认证', 
        icon: 'icon-verify',
        path: '/pages/my/verify',
        value: '已认证'
      },
      { 
        label: '支付方式', 
        icon: 'icon-wallet',
        path: '/pages/my/payment-method'
      },
      { 
        label: '消息通知', 
        icon: 'icon-notification',
        path: '/pages/my/notification'
      }
    ]
  },
  {
    items: [
      { 
        label: '客服中心', 
        icon: 'icon-service',
        path: '/pages/my/service'
      },
      { 
        label: '设置', 
        icon: 'icon-settings',
        path: '/pages/my/settings'
      }
    ]
  }
])

// 页面跳转
const navigateTo = (url) => {
  uni.navigateTo({
    url,
    fail: (err) => {
      console.error('导航失败:', err)
      // 如果导航失败，尝试使用 redirectTo
      uni.redirectTo({
        url,
        fail: (err2) => {
          console.error('重定向失败:', err2)
        }
      })
    }
  })
}

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        // 清除登录状态
        uni.clearStorageSync()
        // 跳转到登录页
        uni.reLaunch({
          url: '/pages/login/index'
        })
      }
    }
  })
}
</script>

<style lang="scss">
.my-container {
  min-height: 100vh;
  background: $bg-color;
  padding-bottom: 40rpx;
  
  .user-card {
    background: $primary-gradient;
    padding: 40rpx 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .user-info {
      display: flex;
      align-items: center;
      
      .avatar {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        border: 4rpx solid rgba(255,255,255,0.3);
        margin-right: 20rpx;
      }
      
      .info {
        .name {
          font-size: 36rpx;
          color: #fff;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }
        
        .id {
          font-size: 26rpx;
          color: rgba(255,255,255,0.9);
        }
      }
    }
    
    .vip-info {
      text-align: right;
      
      .level {
        font-size: 32rpx;
        color: #fff;
        font-weight: bold;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .desc {
        font-size: 24rpx;
        color: rgba(255,255,255,0.9);
      }
    }
  }
  
  .quick-access {
    margin: -40rpx 20rpx 0;
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    box-shadow: $shadow-sm;
    
    .access-item {
      text-align: center;
      
      .count {
        font-size: 36rpx;
        color: $primary-color;
        font-weight: bold;
        margin-bottom: 8rpx;
        display: block;
      }
      
      .label {
        font-size: 26rpx;
        color: $text-regular;
      }
    }
  }
  
  .function-list {
    margin-top: 20rpx;
    
    .section {
      margin-bottom: 20rpx;
      
      .section-title {
        font-size: 28rpx;
        color: $text-secondary;
        padding: 20rpx 30rpx;
      }
      
      .menu-list {
        background: #fff;
        
        .menu-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 30rpx;
          border-bottom: 1rpx solid #eee;
          
          &:last-child {
            border-bottom: none;
          }
          
          .left {
            display: flex;
            align-items: center;
            
            .iconfont {
              font-size: 40rpx;
              color: $primary-color;
              margin-right: 20rpx;
            }
            
            .label {
              font-size: 30rpx;
              color: $text-primary;
            }
          }
          
          .right {
            display: flex;
            align-items: center;
            
            .value {
              font-size: 26rpx;
              color: $text-secondary;
              margin-right: 12rpx;
            }
            
            .tag {
              font-size: 22rpx;
              color: $primary-color;
              background: $primary-light;
              padding: 4rpx 12rpx;
              border-radius: $radius-sm;
              margin-right: 12rpx;
            }
            
            .icon-arrow-right {
              font-size: 24rpx;
              color: $text-secondary;
            }
          }
          
          &:active {
            background: darken(#fff, 2%);
          }
        }
      }
    }
  }
  
  .logout-btn {
    margin: 40rpx 30rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 30rpx;
    color: $danger;
    background: #fff;
    border-radius: $radius-lg;
    
    &:active {
      background: darken(#fff, 2%);
    }
  }
}
</style> 